
<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>热加载组件 · test search plus plugin</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.2">
        
        
        
    
    <link rel="stylesheet" href="gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="gitbook/gitbook-plugin-search-pro/search.css">
                
            
                
                <link rel="stylesheet" href="gitbook/gitbook-plugin-fontsettings/website.css">
                
            
                
                <link rel="stylesheet" href="gitbook/gitbook-plugin-highlight/website.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="JavaScript-next.html" />
    
    
    <link rel="prev" href="Optimizing-development.html" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="./">
            
                <a href="./">
            
                    
                    Introduction
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="Introduction-to-Webpack.html">
            
                <a href="Introduction-to-Webpack.html">
            
                    
                    介绍 Webpack
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1" data-path="Getting-started.html">
            
                <a href="Getting-started.html">
            
                    
                    第一步
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.2" data-path="Running-a-workflow.html">
            
                <a href="Running-a-workflow.html">
            
                    
                    开始工作流
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.3" data-path="Automatic-browser-refresh.html">
            
                <a href="Automatic-browser-refresh.html">
            
                    
                    浏览器自动刷新
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.4" data-path="Requiring-files.html">
            
                <a href="Requiring-files.html">
            
                    
                    引入文件
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="Introduction-to-React-JS.html">
            
                <a href="Introduction-to-React-JS.html">
            
                    
                    React JS
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="Configuring-react-js.html">
            
                <a href="Configuring-react-js.html">
            
                    
                    配置 React JS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.2" data-path="Optimizing-rebundling.html">
            
                <a href="Optimizing-rebundling.html">
            
                    
                    优化重合并
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.3" data-path="Type-checking-with-flow.html">
            
                <a href="Type-checking-with-flow.html">
            
                    
                    Flow
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="CSS-Fonts-Images.md">
            
                <span>
            
                    
                    CSS, Fonts and Images
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.4.1" data-path="Loading-CSS.html">
            
                <a href="Loading-CSS.html">
            
                    
                    加载 CSS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.2" data-path="Automatic-CSS-refresh.html">
            
                <a href="Automatic-CSS-refresh.html">
            
                    
                    自动刷新 CSS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.3" data-path="Loading-LESS-or-SASS.html">
            
                <a href="Loading-LESS-or-SASS.html">
            
                    
                    加载 LESS 和 SASS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.4" data-path="Inlining-images.html">
            
                <a href="Inlining-images.html">
            
                    
                    内联 images
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.5" data-path="Inlining-fonts.html">
            
                <a href="Inlining-fonts.html">
            
                    
                    内联 fonts
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="Deployment-strategies.md">
            
                <span>
            
                    
                    部署策略
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.1" data-path="Structuring-configuration.html">
            
                <a href="Structuring-configuration.html">
            
                    
                    发布配置
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.2" data-path="Single-bundle.html">
            
                <a href="Single-bundle.html">
            
                    
                    合并成单文件
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.3" data-path="Split-app-and-vendors.html">
            
                <a href="Split-app-and-vendors.html">
            
                    
                    分离应用和第三方
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.4" data-path="Multiple-entry-points.html">
            
                <a href="Multiple-entry-points.html">
            
                    
                    多重入口
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.5" data-path="Lazy-loaded-entry-points.html">
            
                <a href="Lazy-loaded-entry-points.html">
            
                    
                    懒加载入口文件
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.6" data-path="Isomorphic-app.html">
            
                <a href="Isomorphic-app.html">
            
                    
                    同构渲染
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="Wing-It-Like-a-Pro.html">
            
                <a href="Wing-It-Like-a-Pro.html">
            
                    
                    进阶
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.6.1" data-path="Optimizing-development.html">
            
                <a href="Optimizing-development.html">
            
                    
                    优化开发
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.6.2" data-path="Hot-loading-components.html">
            
                <a href="Hot-loading-components.html">
            
                    
                    热加载组件
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.3" data-path="JavaScript-next.html">
            
                <a href="JavaScript-next.html">
            
                    
                    使用下一代 JavaScript
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.4" data-path="Optimizing-caching.html">
            
                <a href="Optimizing-caching.html">
            
                    
                    优化缓存
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.5" data-path="Matchers.html">
            
                <a href="Matchers.html">
            
                    
                    匹配器
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.6" data-path="Lazy-loading-entry-points.md">
            
                <span>
            
                    
                    懒加载入口
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.7" data-path="Creating-a-common-bundle.md">
            
                <span>
            
                    
                    创建一个复用代码
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.8" data-path="Understanding-chunks.html">
            
                <a href="Understanding-chunks.html">
            
                    
                    理解 Chunks
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.9" data-path="Authoring-libraries.html">
            
                <a href="Authoring-libraries.html">
            
                    
                    创建库
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            Published with GitBook
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="." >热加载组件</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <p>So this part is just freakin&apos; awesome. With React JS and the react-hot-loader you can change the class code of your component and see the instances update live in the DOM, without loosing their state! This is pretty much exactly how CSS updates behave, only that it is your components.</p>
<p>&#x6240;&#x4EE5;&#x8FD9;&#x4E2A;&#x7AE0;&#x8282;&#x5C31;&#x662F;&#x4ED6;&#x5988;&#x7684;&#x5C4C;&#x3002;&#x4F7F;&#x7528; React JS &#x548C; react-hot-loader &#x53EF;&#x4EE5;&#x8BA9;&#x4F60;&#x53BB;&#x6539;&#x53D8;&#x7EC4;&#x4EF6;&#x4E2D;&#x7684; class &#x4EE3;&#x7801;&#xFF0C;&#x7136;&#x540E;&#x53EF;&#x4EE5;&#x5728; DOM &#x4E0A;&#x770B;&#x5230;&#x5B9E;&#x65F6;&#x66F4;&#x65B0;&#x4E86;&#x5B9E;&#x4F8B;&#xFF0C;&#x6CA1;&#x6709;&#x4FEE;&#x6539;&#x4ED6;&#x4EEC;&#x7684;&#x72B6;&#x6001;&#xFF01;&#x770B;&#x8D77;&#x6765;&#x5C31;&#x50CF; CSS &#x66F4;&#x65B0;&#x4E00;&#x6837;&#xFF0C;&#x4E0D;&#x8FC7;&#x662F;&#x6362;&#x6210;&#x4E86;&#x7EC4;&#x4EF6;&#x3002;</p>
<h2 id="&#x8BBE;&#x7F6E;">&#x8BBE;&#x7F6E;</h2>
<p>This setup requires that you use the <strong>webpack-dev-server</strong> as introduced in earlier chapters. Now we just have to install the loader with <code>npm install react-hot-loader --save-dev</code>, do a small config change:</p>
<p>&#x8FD9;&#x4E2A;&#x8BBE;&#x7F6E;&#x9700;&#x8981;&#x4F60;&#x4F7F;&#x7528;&#x524D;&#x9762;&#x7AE0;&#x8282;&#x4E2D;&#x4ECB;&#x7ECD;&#x7684; <strong>webpack-dev-server</strong>&#xFF0C;&#x73B0;&#x5728;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x53BB;&#x5B89;&#x88C5;&#x52A0;&#x8F7D;&#x5668; <code>npm install react-hot-loader --save-dev</code>&#xFF0C;&#x7136;&#x540E;&#x505A;&#x4E00;&#x70B9;&#x914D;&#x7F6E;&#xFF1A;</p>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> webpack = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;webpack&apos;</span>);
<span class="hljs-keyword">var</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;path&apos;</span>);

<span class="hljs-keyword">var</span> config = {
  entry: [<span class="hljs-string">&apos;webpack/hot/dev-server&apos;</span>, <span class="hljs-string">&apos;./app/main.js&apos;</span>],
  output: {
    path: path.resolve(__dirname, <span class="hljs-string">&apos;./build&apos;</span>),
    filename: <span class="hljs-string">&apos;bundle.js&apos;</span>
  },
  <span class="hljs-built_in">module</span>: {
    loaders: [{
      test: <span class="hljs-regexp">/\.js$/</span>,

      <span class="hljs-comment">// Use the property &quot;loaders&quot; instead of &quot;loader&quot; and </span>
      <span class="hljs-comment">// add &quot;react-hot&quot; in front of your existing &quot;jsx&quot; loader</span>
      <span class="hljs-comment">// &#x4F7F;&#x7528; &quot;loaders&quot; &#x5C5E;&#x6027;&#x4EE3;&#x66FF; &quot;loader&quot;</span>
      <span class="hljs-comment">// &#x7136;&#x540E;&#x5728; &quot;jsx&quot; &#x52A0;&#x8F7D;&#x5668;&#x4E4B;&#x524D;&#x6DFB;&#x52A0; &quot;react-hot&quot; </span>
      loaders: [<span class="hljs-string">&apos;react-hot&apos;</span>, <span class="hljs-string">&apos;babel&apos;</span>]
    }]
  }
};

<span class="hljs-built_in">module</span>.exports = config;
</code></pre>
<p>And you will also need a small snippet of code in your main entry file. In the example above that would be the <em>main.js</em> file located in the <code>app/</code> folder.</p>
<p>&#x540C;&#x65F6;&#x4F60;&#x4E5F;&#x9700;&#x8981;&#x5728;&#x4F60;&#x7684;&#x4E3B;&#x5165;&#x53E3;&#x6587;&#x4EF6;&#x505A;&#x4E00;&#x4E9B;&#x4FEE;&#x6539;&#xFF0C;&#x4F8B;&#x5B50;&#x4E2D;&#xFF0C;&#x5728; <code>app/</code> &#x6587;&#x4EF6;&#x5939;&#x4E2D;&#x7684; <em>main.js</em> &#x50CF;&#x4E0B;&#x9762;&#x90A3;&#x6837;&#x4FEE;&#x6539;&#xFF1A;</p>
<p><em>app/main.js</em></p>
<pre><code class="lang-javascript"><span class="hljs-comment">// You probably already bring in your main root component, </span>
<span class="hljs-comment">// maybe it is your component using react-router</span>
<span class="hljs-comment">// &#x4F60;&#x53EF;&#x80FD;&#x5DF2;&#x7ECF;&#x628A;&#x4F60;&#x7684;&#x6839;&#x7EC4;&#x4EF6;&#x5F15;&#x5165;&#x4E86;</span>
<span class="hljs-comment">// &#x7EC4;&#x4EF6;&#x53EF;&#x80FD;&#x7528;&#x4E86; react-router</span>
<span class="hljs-keyword">var</span> RootComponent = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./RootComponent.jsx&apos;</span>);

<span class="hljs-comment">// When you render it, assign it to a variable</span>
<span class="hljs-comment">// &#x5F53;&#x4F60;&#x6E32;&#x67D3;&#x5B83;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x8BA9;&#x5B83;&#x8D4B;&#x503C;&#x7ED9;&#x4E00;&#x4E2A;&#x53D8;&#x91CF;</span>
<span class="hljs-keyword">var</span> rootInstance = React.render(RootComponent(), <span class="hljs-built_in">document</span>.body);

<span class="hljs-comment">// Then just copy and paste this part at the bottom of</span>
<span class="hljs-comment">// the file</span>
<span class="hljs-comment">// &#x7136;&#x540E;&#x5728;&#x6587;&#x4EF6;&#x7684;&#x6700;&#x5E95;&#x90E8;&#x590D;&#x5236;&#x7C98;&#x5E16;</span>
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">module</span>.hot) {
  <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;react-hot-loader/Injection&apos;</span>).RootInstanceProvider.injectProvider({
    getRootInstances: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
      <span class="hljs-comment">// Help React Hot Loader figure out the root component instances on the page:</span>
      <span class="hljs-comment">// &#x5E2E;&#x52A9; React Hot Loader &#x8BC6;&#x522B;&#x51FA;&#x9875;&#x9762;&#x4E2D;&#x7684;&#x6839;&#x7EC4;&#x4EF6;</span>
      <span class="hljs-keyword">return</span> [rootInstance];
    }
  });
}
</code></pre>
<p>It is that simple. Render a component to the DOM and make a code change on the class of that component. It will render itself again, keeping the existing state. Cool?</p>
<p>&#x5C31;&#x662F;&#x8FD9;&#x4E48;&#x7B80;&#x5355;&#xFF0C;&#x5728; DOM &#x4E2D;&#x6E32;&#x67D3;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;&#xFF0C;&#x7136;&#x540E;&#x4FEE;&#x6539;&#x4E00;&#x4E9B;&#x7EC4;&#x4EF6;&#x4E2D;&#x7684;&#x4EE3;&#x7801;&#xFF0C;&#x5B83;&#x4F1A;&#x81EA;&#x52A8;&#x6E32;&#x67D3;&#xFF0C;&#x5374;&#x4FDD;&#x5B58;&#x4E86;&#x5DF2;&#x7ECF;&#x5B58;&#x5728;&#x4E86;&#x7684;&#x72B6;&#x6001;&#xFF0C;&#x5C4C;&#x4E0D;&#x5C4C;&#xFF1F;</p>
<p>Read more about the <a href="http://gaearon.github.io/react-hot-loader/getstarted/" target="_blank">react-hot-loader</a>.</p>
<p>&#x53EF;&#x4EE5;&#x5230; <a href="http://gaearon.github.io/react-hot-loader/getstarted/" target="_blank">react-hot-loader</a> &#x4E86;&#x89E3;&#x66F4;&#x591A;&#x3002;</p>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="Optimizing-development.html" class="navigation navigation-prev " aria-label="Previous page: 优化开发">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="JavaScript-next.html" class="navigation navigation-next " aria-label="Next page: 使用下一代 JavaScript">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"热加载组件","level":"1.6.2","depth":2,"next":{"title":"使用下一代 JavaScript","level":"1.6.3","depth":2,"path":"JavaScript-next.md","ref":"JavaScript-next.md","articles":[]},"previous":{"title":"优化开发","level":"1.6.1","depth":2,"path":"Optimizing-development.md","ref":"Optimizing-development.md","articles":[]},"dir":"ltr"},"config":{"plugins":["-lunr","-search","search-pro","fontsettings","livereload"],"root":"./content","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"search-pro":{},"fontsettings":{"theme":"white","family":"sans","size":2},"livereload":{},"highlight":{},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{"version":"0.0.0"},"title":"test search plus plugin","gitbook":"*"},"file":{"path":"Hot-loading-components.md","mtime":"2017-01-24T08:51:37.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-01-24T08:53:13.796Z"},"basePath":".","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="gitbook/gitbook.js"></script>
    <script src="gitbook/theme.js"></script>
    
        
        <script src="gitbook/gitbook-plugin-search-pro/jquery.mark.min.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-search-pro/search.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-livereload/plugin.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    

    </body>
</html>

